/*
 * @Author: xiaosihan 
 * @Date: 2023-09-19 00:26:20 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-20 07:40:09
 */



import { DragOutlined } from "@ant-design/icons";
import designEditor from "@/editorComponent/designEditor";
import utils from "@/utils/utils";
import { Tooltip } from "antd";
import Popconfirm from "antd/lib/popconfirm";
import clsx from "clsx";
import { autorun, toJS } from "mobx";
import { useEffect, useState } from "react";
import delSVG from "../img/del.svg?raw";
import myPhotoStore from "../myPhotoStore";
import styles from "./imgItem.module.less";
import { Folder } from "#/type";

interface Iprops {
  id: number,
  src: string;
  size?: "large" | "small",
  onDelete: () => void;
  onClick?: (url: string, name: string) => void;
}

// 图片成员
export default function ImgItem(props: Iprops) {

  const [folderList, setFolderList] = useState<Array<Folder>>([]);
  const [open, setOpen] = useState(false);

  useEffect(() => {

  }, []);

  return (
    <span className={clsx(styles.imgItem, props.size === "small" && styles.small)} >
      <img
        alt=""
        src={props.src}
        className={styles.img}
        onClick={() => {
          if (props.onClick) {
            props.onClick("我的图片", props.src);
          } else {
            designEditor.addImg("我的图片", utils.ossSuffix(props.src, 500));
          }
        }}
      />

      <Popconfirm
        title='确定要删除图片'
        onConfirm={() => props.onDelete()}
        onCancel={(e: any) => e.stopPropagation()}
        okText="删除"
        cancelText="取消"
      >
        <span
          className={styles.delItemIcon}
          dangerouslySetInnerHTML={{ __html: delSVG }}
        >
        </span>
      </Popconfirm>
    </span>
  );

}